/*
 * @Author: Drc
 * @Date: 2020-12-14 16:42:12
 * @LastEditTime: 2021-12-20 12:01:04
 * @LastEditors: Drc
 */
import React, {useEffect} from 'react'
import {NavigationContainer} from '@react-navigation/native'
import {createStackNavigator, HeaderStyleInterpolators, CardStyleInterpolators} from '@react-navigation/stack'
import MainStack from './MainStack'
import LoginStack from './LoginStack'
import {navigationRef} from './controller'
import {useSelector} from 'react-redux'
import store, {RootState} from '@path/redux'
import Theme from '@path/config/theme'
import SplashScreen from 'react-native-splash-screen'

const Stack = createStackNavigator()

export type Stacks = 'MainRoute' | 'LoginRoute'

const AppNavigation = () => {
  useSelector((state: RootState) => state.global)

  useEffect(() => {
    setTimeout(() => {
      SplashScreen.hide()
    }, 500)
  }, [])

  const getActiveRouteName = (state: any): string => {
    const route = state.routes[state.index]
    if (route.state) {
      return getActiveRouteName(route.state)
    }
    return route.name
  }

  return (
    <NavigationContainer
      ref={navigationRef}
      onStateChange={(state) => {
        const currentRouteName = getActiveRouteName(state)
        console.log('[onStateChange]', currentRouteName)
      }}>
      <Stack.Navigator initialRouteName={store.getState().user.token ? 'MainRoute' : 'LoginRoute'}>
        <Stack.Screen
          options={({route}) => {
            return {
              headerShown: false, //若显示会阻挡安卓真机点击
              headerTransparent: true,
              title: '',
              headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
              cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
            }
          }}
          name="MainRoute"
          component={MainStack}
        />

        <Stack.Screen
          options={({route}) => {
            return {
              headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
              cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
              // gestureDirection: 'vertical',
              headerShown: false,
              title: route.name,
            }
          }}
          name="LoginRoute"
          component={LoginStack}
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

export default AppNavigation
